<template>
	<view class="wm">
		<blocl v-if="JSON.stringify(this.question) !== '{}'">
			<view class="detail_content">
				<view class="up_down">
					<view class="up">
						<view v-if="question.upid != queryObj.questionid" @click="next(question.upid,parseInt(queryObj.q_i)-1)">
							上一题
						</view>
					</view>
					<view class="q_n">第{{queryObj.q_i}}题</view>
					<view class="down">
						<view v-if="question.downid != queryObj.questionid"  @click="next(question.downid,parseInt(queryObj.q_i)+1)">
							下一题
						</view>
					</view>
				</view>
				<!-- 提详情页面 -->
				<!-- 题开始 -->
				<question-radio :isShowNaswer="isShowNaswer"  :question="question" :queryObj="queryObj"></question-radio>
				<!-- 题结束 -->
				<!-- 组合题组合小题 -->
				<block v-if="question.isgroup == 1" v-for="(item,index) in question.group" :key="index">
					<view class="smaillquestion">
						<question-radio :isShowNaswer="isShowNaswer" :question="item" :queryObj="queryObj" :isShowtype="false" :isShowNumber="false" :isShowSmallNumber="true" :smallNumber="index+1"></question-radio>
					</view>
				</block>
			</view>
			<view class="goods_nav">
				<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
			</view>
		</blocl>
		<blocl v-else>
			<no-data></no-data>
		</blocl>
	</view>
	
	<!-- vip -->
	<vip :showvip="showvip" @changeShow="changeShow"></vip>
</template>

<script>
	// 从Vuex中按需要导出
	import {mapState,mapMutations,mapGetters,mapActions} from "vuex"
	export default {
		computed:{
			//调用mapState 方法，把 m_star 模块中的cart数组映射到当前页面中，作为计算属性来使用
			// ...mapState('模块的名称',['要映射的数据名称1','映射的数据名称2'])
			...mapState("m_star",["star"]),
			//把m_star 模块中名称为star_total的getters映射到当前页面使用
			...mapGetters("m_star",['star_total'])
		},
		//监听计算数据
		watch:{
			star_total:{
				//handler 属性用来定义监听器的function处理函数
				handler(newVal){
					//通过数组的find() 方法，找到搜藏中的配置对象
					const findResult = this.options.find((x)=> x.text == '收藏')
					if(findResult){
						findResult.info = newVal
					}
				},
				//immediate 属性用来声明此监听器，是否在页面初次加载完毕之后立即调用
				immediate:true,
			}
		},
		data() {
			/**
			 * @param {Object} queryObj 请求数据接口时的请求数据
			 * @param {Object} question 当前题目详情页面的题目
			 * @param {Object} options 当前题目详情页面的题目
			 * @param {Object} buttonGroup 当前题目详情页面的题目
			 * @param {Boolean} isShowNaswer 是否显示答案
			 * @param {Boolean} showvip 是否显示开会员弹窗
			 */
			return {
				queryObj:{
					schoolid:0,
					questionwayid:0,
					questiontypeid:0,
					questioncourseid:0,
					questionid:0,
					q_i:0,
				},
				question:{},
				options: [
					{
						icon: 'star',
						text: '收藏',
						info: 0
					},
				],
				 buttonGroup: [
					{
					  text: '加入收藏',
					  backgroundColor: 'linear-gradient(to right,#feb27a,#ff7d5d)',
					  color: '#fff'
					},
					{
					  text: '查看答案',
					  backgroundColor: 'linear-gradient(to right,#93bdf3,#68d0e3)',
					  color: '#fff'
					}
				],
				isShowNaswer:false,
				showvip:false
			}
		},
		onLoad(option){
			this.queryObj.schoolid = option.schoolid || 0;
			this.queryObj.questionwayid = option.questionwayid || 0;
			this.queryObj.questiontypeid = option.questiontypeid || 0;
			this.queryObj.questioncourseid = option.questioncourseid || 0;
			this.queryObj.questionid = option.questionid || 0;
			this.queryObj.q_i = option.q_i || 1;
			this.getQuestion();
			
		},
		methods:{
			...mapMutations("m_star",['addToStar','delToStar']),
			...mapActions('m_star',['ifStar']),
			async getQuestion(){
				//发送请求
				const {data:res} = await uni.$http.post("Questions/getQuestion",this.queryObj);
				//判断是否请求失败
				if(res.meta.status !== 1) return uni.$showMsg();
				//修改收藏按钮的状态
				this.detail_ifstar();
				// 请求成功
				this.question = res.data;
				this.question.queryObj = {
					schoolid:this.queryObj.schoolid,
					questionwayid:this.queryObj.questionwayid,
					questiontypeid:this.queryObj.questiontypeid,
					questioncourseid:this.queryObj.questioncourseid,
					questionid:this.queryObj.questionid,
					q_i:this.queryObj.q_i,
				}
				
			},
			/**
			 * 查选上一题和下一题
			 * @param {number} id 当前题目的id
			 * @param {number} i 题号
			 */
			next(id,i){
				if(i<6){
					this.queryObj.questionid = id
					this.queryObj.q_i = i
				    this.getQuestion();
				}else{
				   this.changeShow(true);
				}
			},
			/**
			 * @param {Object} e  收藏
			 */
			onClick (e) {
				//判断点击是收藏则跳转到收藏列表
				if(e.content.text == "收藏"){
					uni.navigateTo({
						url:"/subpkg/star_list/star_list"
					})
				}
			},
		
			buttonClick (e) {
				//点击底部按钮
				if(e.content.text == "查看答案"){
					//显示答案
					this.isShowNaswer = true;
					e.content.text = "隐藏答案"
				}else if(e.content.text == '隐藏答案'){
					//隐藏答案
					this.isShowNaswer = false;
					e.content.text = "查看答案"
				}else if(e.content.text == '加入收藏'){
				    let result =   this.addToStar(this.question)
					e.content.text = "取消收藏"
					uni.$showMsg("收藏成功");
				}else if(e.content.text == "取消收藏"){
					let result =   this.delToStar(this.question)
					e.content.text = "加入收藏"
					uni.$showMsg("已取消收藏");
				}
			},
			/**
			 * 判断收藏夹中是否存在，如果存在则改变底部按钮的状态
			 */
			detail_ifstar(){
				this.ifStar(this.queryObj.questionid).then(data=>{
					if(data){
						const op = this.buttonGroup.find((x)=> x.text == "加入收藏");
					    if(op) op.text = "取消收藏"
					}else{
						const op = this.buttonGroup.find((x)=> x.text == "取消收藏");
						if(op) op.text = "加入收藏"
					}
				})
			},
			changeShow(status){
				this.showvip = status
			}
		}
	}
</script>

<style lang="scss">
.detail_content{
	padding-bottom:80px;
	margin-top:85rpx;
	.up_down{
		display:flex;
		justify-content: space-between;
		position: fixed;
		width:100%;
		height:70rpx;
		align-items: center;
		background-color:#d11a2d;
		border-bottom: 1px solid #d5d5d5;
		top:0;
		left:0;
		z-index: 90;
		text-align: center;
		.up{
			margin-left:3%;
			width: 130rpx;
			color:#fff;
		}
		.q_n{
			color:#fff;
		}
		.down{
			margin-right:3%;
			width: 130rpx;
			color:#fff
		}
	}
}
.goods_nav{
	background-color:#fff;
	height:65px;
	position:fixed;
	padding-top:10rpx;
	bottom:0;
	left:0;
	width:100%;
}

</style>
